<template>
	<div class="home-header">
		<router-link to="/search">
			<van-search show-action placeholder="请输入搜索关键词" readonly>
				<template #action>

					<div>
						<router-link to="/msg">
							<van-icon size="20" name="bell" dot color="#ccc" />
						</router-link>
					</div>

				</template>
			</van-search>
		</router-link>
	</div>

	<!--  导航栏 -->
	<van-tabs color="#fff" @click-tab="clickTab" class="home-tab">
		<van-tab v-for="item in cate" :name="item._id" :title="item.name"></van-tab>
	</van-tabs>

	<div class="home-header-fill"></div>
	<!--  内容开始 -->


	<div class="container">
		<!--  轮播 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="item in banner">

				<img :src="item.img" alt="" />

			</van-swipe-item>

		</van-swipe>

		<!-- 分类 -->

		<IndexCate :cate="cate" @item-click="cateTap"></IndexCate>

		<!--   农业土特产 -->

		<div class="goodsShow">

			<img :src="goodsShow.bannerImg" alt="">

			<div class="goodsShowContainer">
				<div class="goodsShowScroll">

					<div class="item" v-for="item in goodsShow.rows" @click="navTo('/goodsDetail?goodsId='+item._id)">
						<img :src="item.goods_thumb" alt="">
						<p>{{item.name}}</p>

					</div>

				</div>
			</div>
		</div>

		<!--   / 农业土特产 结束-->
		<!--   日用百货 -->

		<div class="goodsShow">

			<img :src="goodsShow2.bannerImg" alt="">

			<div class="goodsShowContainer">
				<div class="goodsShowScroll">

					<div class="item" v-for="item in goodsShow2.rows" 
					@click="navTo('/goodsDetail?goodsId='+item._id)">
						<img :src="item.goods_thumb" alt="">
						<p>{{item.name}}</p>

					</div>

				</div>
			</div>
		</div>

		<!--   / 日用百货 结束-->




	</div>

</template>
<script>
	//   keep-alive是给组件加缓存的 
	// 当切换组件时   当他被销毁时，不会真的销毁  
	// 隐藏到内存中 休眠了  
	// 当你再切换回这个页面时   恢复
	// 正规写法 需要给页面组件加个name 
	
	export default {
		name:"index",
		// mounted() {
		// 	console.log(this)
		// }
	}
	
</script>

<script setup>
	import {
		getCategoryIndexShow,
		getBannerList,
		getGoodsList
	} from '@/api/goods.js'
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	import {
		useRouter
	} from 'vue-router';
	import IndexCate from './components/IndexCate.vue'
	import {
		useUserStore
	} from '@/stores/user'
	const {
		isLogin,
		userInfo,
	} = toRefs(useUserStore())
	const router = useRouter()
	let cate = ref([]); // get
	function setCate(val) { //set
		cate.value = val
	}
	getCategoryIndexShow().then(res => {
		console.log(res.category)
		setCate(res.category)
	})

	function clickTab(e) {
		router.push('/goodsList?id=' + e.name)
	}


	let banner = ref([]); // get
	function setBanner(val) { //set
		banner.value = val
	}
	getBannerList().then(res => {
		console.log(res.rows)
		setBanner(res.rows)
	})


	//  cateTap

	function cateTap(e) {
		router.push('/goodsList?id=' + e._id)
	}

	//  

	import useIndexGoodsShow from './hooks/useIndexGoodsShow.js'
	let {
		goodsShow
	} = useIndexGoodsShow("农业土特产")
	let {
		goodsShow: goodsShow2
	} = useIndexGoodsShow("日用百货")
	
	
	//  
	
	getGoodsList({
		isHot:true
	}).then(res=>{
		console.log(res)
	})
</script>

<style>
	.home-header {
		height: 50px;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.home-header-fill {

		height: 100px;
		width: 100%;
		display: block;
	}

	.home-tab {

		height: 50px;
		width: 100%;
		position: fixed;
		top: 50px;
		left: 0;
		z-index: 999;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		text-align: center;
	}

	.my-swipe .van-swipe-item img {
		width: 100%;
		height: auto;
	}

	.goodsShow {
		overflow: hidden;
	}
	.goodsShow >img {
		overflow: hidden;
		width: 100%;
	}

	.goodsShowContainer {
		width: 100%;
		height: 200px;
		overflow: scroll;
	}

	.goodsShowScroll {
		/* width: 1000px; */
		white-space: nowrap;
		display: flex;


	}

	.goodsShowScroll .item {
		/* 	width: 150px;
		flex-basis: 150px; */
		flex-grow: 1;
		/* 允许伸缩，但不允许缩小 */
		min-width: 100px;
		/* 设置最小宽度 */
		max-width: 100px;
		height: 160px;
		margin: 5px 10px;


	}

	.goodsShowScroll .item img {

		height: 100px;
		width: 100px;

	}

	.goodsShowScroll .item p {

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100px;

	}
</style>